<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-card">
          <div class="welcome-info">
            <h2>欢迎回来，{{ userInfo.nickname || userInfo.username }}</h2>
            <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="data-overview">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card">
          <div class="data-header">
            <div class="data-title">应用总数</div>
            <el-icon class="data-icon"><Grid /></el-icon>
          </div>
          <div class="data-value">{{ dashboardData.totalApps }}</div>
          <div class="data-footer">
            <span>较昨日</span>
            <span :class="['data-change', dashboardData.appIncrease >= 0 ? 'increase' : 'decrease']">
              {{ dashboardData.appIncrease >= 0 ? '+' : '' }}{{ dashboardData.appIncrease }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card">
          <div class="data-header">
            <div class="data-title">用户总数</div>
            <el-icon class="data-icon"><User /></el-icon>
          </div>
          <div class="data-value">{{ dashboardData.totalUsers }}</div>
          <div class="data-footer">
            <span>较昨日</span>
            <span :class="['data-change', dashboardData.userIncrease >= 0 ? 'increase' : 'decrease']">
              {{ dashboardData.userIncrease >= 0 ? '+' : '' }}{{ dashboardData.userIncrease }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card">
          <div class="data-header">
            <div class="data-title">下载总数</div>
            <el-icon class="data-icon"><Download /></el-icon>
          </div>
          <div class="data-value">{{ dashboardData.totalDownloads }}</div>
          <div class="data-footer">
            <span>较昨日</span>
            <span :class="['data-change', dashboardData.downloadIncrease >= 0 ? 'increase' : 'decrease']">
              {{ dashboardData.downloadIncrease >= 0 ? '+' : '' }}{{ dashboardData.downloadIncrease }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card">
          <div class="data-header">
            <div class="data-title">待审核应用</div>
            <el-icon class="data-icon"><Warning /></el-icon>
          </div>
          <div class="data-value">{{ dashboardData.pendingAudits }}</div>
          <div class="data-footer">
            <el-button v-if="isAdmin && dashboardData.pendingAudits > 0" type="text" @click="goToAudits">
              去审核 <el-icon><ArrowRight /></el-icon>
            </el-button>
            <span v-else>暂无待处理</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>应用下载趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成图表库，如ECharts -->
            <div class="chart-placeholder">
              <el-empty description="图表加载中..." />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>热门应用排行</span>
              <el-button type="text" @click="goToApps">查看全部</el-button>
            </div>
          </template>
          <div class="app-list">
            <div v-for="(app, index) in dashboardData.topApps" :key="app.id" class="app-item">
              <div class="app-rank">{{ index + 1 }}</div>
              <el-image :src="app.icon" class="app-icon" fit="cover" />
              <div class="app-info">
                <div class="app-name">{{ app.name }}</div>
                <div class="app-downloads">{{ app.downloads }} 次下载</div>
              </div>
            </div>
            <el-empty v-if="!dashboardData.topApps.length" description="暂无数据" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Grid, User, Download, Warning, ArrowRight } from '@element-plus/icons-vue';
import { getDashboardData } from '@/api/system/dashboard.ts';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const isAdmin = computed(() => true);

const currentDate = new Date().toLocaleDateString('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

const timeRange = ref('week');

const dashboardData = reactive({
  totalApps: 0,
  appIncrease: 0,
  totalUsers: 0,
  userIncrease: 0,
  totalDownloads: 0,
  downloadIncrease: 0,
  pendingAudits: 0,
  topApps: []
});

const fetchDashboardData = async () => {
  try {
    const res = await getDashboardData();
    Object.assign(dashboardData, res.data);
  } catch (error) {
    console.error('获取仪表盘数据失败', error);
  }
};

const goToAudits = () => {
  router.push('/app/audits');
};

const goToApps = () => {
  router.push('/app/apps');
};

onMounted(() => {
  fetchDashboardData();
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.welcome-info h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.welcome-info p {
  margin: 10px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.data-overview {
  margin-bottom: 20px;
}

.data-card {
  height: 100%;
  margin-bottom: 20px;
}

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.data-title {
  font-size: 16px;
  color: #606266;
}

.data-icon {
  font-size: 24px;
  color: #409eff;
}

.data-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 10px 0;
}

.data-footer {
  font-size: 14px;
  color: #909399;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-change {
  font-weight: bold;
}

.data-change.increase {
  color: #67c23a;
}

.data-change.decrease {
  color: #f56c6c;
}

.chart-card, .list-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-list {
  max-height: 300px;
  overflow-y: auto;
}

.app-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.app-item:last-child {
  border-bottom: none;
}

.app-rank {
  width: 24px;
  height: 24px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-weight: bold;
  color: #606266;
}

.app-item:nth-child(1) .app-rank {
  background-color: #f56c6c;
  color: white;
}

.app-item:nth-child(2) .app-rank {
  background-color: #e6a23c;
  color: white;
}

.app-item:nth-child(3) .app-rank {
  background-color: #409eff;
  color: white;
}

.app-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 10px;
}

.app-info {
  flex: 1;
}

.app-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.app-downloads {
  font-size: 12px;
  color: #909399;
}
</style>
